{% extends "mobile/base-mobile.html" %}

{% block header %}


{% endblock %}



{% block main %}

	<h1 style="text-align: center; font-family: 'Lobster'; color: #1B6FC4;
		 font-size: 50px; letter-spacing: 5px; margin: 0; padding-top: 5%">fleq</h1>

	<h4 style="text-align: center; font-family: 'Lobster'; margin-left: 5%; margin-right: 5%; margin-bottom: 0;
			letter-spacing: 1px;">Complete the form below and get a new user account to enjoy fleq</h4>


	<div data-role="content">

			<!-- Show errors from form -->
			{% if registerForm.errors %}<div class="ui-body ui-body-e">{% endif %}
			{% if registerForm.non_field_errors %}{% for error in registerForm.non_field_errors %}{{ error }}{% endfor %}<br />{% endif %}

			{% for field in registerForm %}
				{% if field.errors %}
					<u>
						<li>{% for error in field.errors %} 
								{{ field.label_tag }}: {{ error }}
							{% endfor %}
						</li>
					</u><br/>
				{% endif %}
			{% endfor %}

			{% if registerForm.errors %}</div>{% endif %}

			<form id="registerForm" action="/signin" method="POST" enctype="multipart/form-data" >
				<p><input id="id_username" type="text" name="username" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="username"></p>
				<p><input id="id_first_name" type="text" name="first_name" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="first name"></p>
				<p><input id="id_last_name" type="text" name="last_name" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="last name"></p>
				<p><input id="id_password" type="password" name="password" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="password"></p>
				<p><input id="id_password2" type="password" name="password2" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="repeat password"></p>
				<p>Introduce an email account that you usually use, here you will receive useful FLEQ notifications 
				<input id="id_email" type="text" name="email" maxlength="100" 
						class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" placeholder="email"></p>

				<center>
					<a href="/signin" onclick="document.getElementById('registerForm').submit();" 
					data-role="button" data-theme="b" data-icon="star" data-iconpos="left">Register</a>
				</center>
				<br/>
			</form>
	</div>

{% endblock %}


{% block footer %}

	<div data-theme="d" data-role="footer">
	    <h3>
	        JGN, 2012
	    </h3>
	</div>

{% endblock %}
